/**
 * @param {string} shapeType 支持 rect/circel/path 等内置节点
 * @param {string} getShapeStyle 用于覆盖 base-node 默认样式
 * @param {string} icon 图片 url
 * @param {string} labelCfg 文本节点样式
 */
import defaultStyles from './defaultStyles'

const {
    iconStyles,
    nodeStyles,
    anchorPointStyles,
    nodeLabelStyles,
    nodeStateStyles,
    baseColor
} = defaultStyles

function getStyle (options, cfg) {
    return {
    // ...cfg,
    // // 自定义默认样式
    // // ...nodeStyles,
    // ...options,
        ...cfg,
        // 自定义默认样式
        ...options,
        // 文本配置
        labelCfg: {
            ...cfg.labelCfg,
            ...nodeLabelStyles,
            ...options.labelCfg
        },
        // 当前节点样式
        ...nodeStyles.style,
        ...options.style,
        ...cfg.style,
        // 图标样式
        iconStyles: {
            ...iconStyles,
            ...options.iconStyles,
            ...cfg.iconStyles
        },
        // 锚点样式
        anchorPointStyles: {
            ...anchorPointStyles,
            ...cfg.anchorPointStyles
        },
        ...nodeStateStyles,
        ...options.nodeStateStyles,
        ...cfg.nodeStateStyles,
        // 锚点高亮样式
        anchorHotsoptStyles: cfg.anchorHotsoptStyles
    }
}

export default G6 => {
    // 从 base-node 中扩展（开始和结束节点）
    G6.registerNode('rect-node-endpoint', {
        shapeType: 'rect',
        // 当前节点的样式集合
        getShapeStyle (cfg) {
            const width = 150
            const height = 40
            const style = getStyle({
                style: {
                    stroke: 'rgba(172, 212, 247)',
                    fill: 'rgba(232, 247, 254)',
                    width,
                    height,
                    // radius: 30,
                    // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
                    x: -width / 2,
                    y: -height / 2
                },
                iconStyles: {
                    logoIcon: {
                        width: 25,
                        height: 25,
                        x: -width / 2 + 12 / 5,
                        y: -(height) / 2 + 12 / 2,
                        show: true,
                        img: require('./../../../img/start-icon.png')
                    }
                },
                nodeStateStyles: {
                    'nodeState:default': {
                        fill: 'rgba(232, 247, 254)',
                        stroke: 'rgba(172, 212, 247)'
                    },
                    'nodeState:hover': {
                        cursor: 'pointer'
                    },
                    'nodeState:selected': {
                        stroke: '#f60'
                    }
                }
            }, cfg)
            return style
        }
    }, 'base-node')
    // 从 base-node 中扩展方形节点（流程节点）
    G6.registerNode('flow-node', {
        shapeType: 'rect',
        // 当前节点的样式集合
        getShapeStyle (cfg) {
            const width = 150
            const height = 40
            return getStyle({
                style: {
                    stroke: 'rgba(253,217,175)',
                    fill: 'rgba(255,247,231)',
                    width,
                    height,
                    radius: 0,
                    // 将图形中心坐 标移动到图形中心, 用于方便鼠标位置计算
                    x: -width / 2,
                    y: -height / 2
                },
                iconStyles: {
                    logoIcon: {
                        width: 22,
                        height: 22,
                        x: -width / 2 + 12 / 5,
                        y: -(height) / 2 + 16 / 2,
                        show: true,
                        img: require('./../../../img/sp-icon.png')
                    }
                },
                nodeStateStyles: {
                    'nodeState:default': {
                        fill: 'rgba(255,247,231)',
                        stroke: 'rgba(253,217,175)'
                    },
                    'nodeState:hover': {
                        cursor: 'pointer'
                    },
                    'nodeState:selected': {
                        stroke: '#f60'
                    }
                }
            }, cfg)
        }
    }, 'base-node')
    // 抄送节点
    G6.registerNode('send-node', {
        shapeType: 'rect',
        // 当前节点的样式集合
        getShapeStyle (cfg) {
            const width = 150
            const height = 40
            return getStyle({
                style: {
                    stroke: 'rgba(250,208,229)',
                    fill: 'rgba(254,240,246)',
                    width,
                    height,
                    radius: 0,
                    // 将图形中心坐 标移动到图形中心, 用于方便鼠标位置计算
                    x: -width / 2,
                    y: -height / 2
                },
                iconStyles: {
                    logoIcon: {
                        width: 22,
                        height: 22,
                        x: -width / 2 + 12 / 5,
                        y: -(height) / 2 + 16 / 2,
                        show: true,
                        img: require('./../../../img/send-icon.png')
                    }
                },
                nodeStateStyles: {
                    'nodeState:default': {
                        fill: 'rgba(254,240,246)',
                        stroke: 'rgba(250,208,229)'
                    },
                    'nodeState:hover': {
                        cursor: 'pointer'
                    },
                    'nodeState:selected': {
                        stroke: '#f60'
                    }
                }
            }, cfg)
        }
    }, 'base-node')
    // 扩展圆形节点
    G6.registerNode('circle-node', {
        shapeType: 'circle',
        getShapeStyle (cfg) {
            const r = cfg.style.r || 30
            return getStyle.call(this, {
                fill: '#39495b',
                lineDash: [1, 2],
                r, // 半径
                // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
                x: 0,
                y: 0
            }, cfg)
        }
    }, 'base-node')

    // 扩展椭圆形
    G6.registerNode('ellipse-node', {
        shapeType: 'ellipse',
        getShapeStyle (cfg) {
            return getStyle.call(this, {
                rx: 50,
                ry: 30,
                // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
                x: 0,
                y: 0
            }, cfg)
        }
    }, 'base-node')

    // 扩展模态节点
    G6.registerNode('modelRect-node', {
        shapeType: 'rect',
        getShapeStyle (cfg) {
            const width = cfg.style.width || 200
            const height = cfg.style.height || 80

            return getStyle.call(this, {
                width,
                height,
                radius: 5,
                // 将图形中心坐标移动到图形中心, 用于方便鼠标位置计算
                x: -width / 2,
                y: -height / 2
            }, cfg)
        }
    }, 'base-node')

    // 扩展菱形
    G6.registerNode('diamond-node', {
        shapeType: 'path', // 非内置 shape 要指定为path
        getShapeStyle (cfg) {
            const path = this.getPath(cfg)
            return getStyle.call(this, {
                labelCfg: {
                    // fontSize: 14,
                    // fill: '#f0f',
                    textAlign: 'top',
                    x: -25,
                    y: 0
                },
                path,
                x: 0,
                y: 0
            }, cfg)
        },
        // 返回菱形的路径
        getPath (cfg) {
            const size = cfg.style.size || [100, 80] // 如果没有 size 时的默认大小
            const width = size[0]
            const height = size[1]
            //  / 1 \
            // 4     2
            //  \ 3 /
            return [
                ['M', 0, -height / 2], // 上部顶点
                ['L', width / 1.5, 0], // 右侧顶点
                ['L', 0, height / 2], // 下部顶点
                ['L', -width / 1.5, 0], // 左侧顶点
                ['Z'] // 封闭
            ]
        }
    }, 'base-node')

    // 扩展三角形节点
    G6.registerNode('triangle-node', {
        shapeType: 'path',
        getShapeStyle (cfg) {
            const path = this.getPath(cfg)

            return getStyle.call(this, {
                fill: '#f1b953',
                lineWidth: 0,
                direction: cfg.direction || 'up',
                path,
                x: 0,
                y: 0
            }, cfg)
        },
        getPath (cfg) {
            const direction = cfg.direction || 'up'
            const size = cfg.style.size || [100, 140] // 如果没有 size 时的默认大小
            const width = size[0]
            const height = size[1]

            const path = [
                // ['M', 0, -height / 2], // 上部顶点
                // ['L', -width / 2, 0], // 左侧顶点
                // ['L', width / 2, 0], // 右侧顶点
                ['Z'] // 封闭
            ]

            if (direction === 'up') {
                path.unshift(
                    ['M', 0, -height / 2],
                    ['L', -width / 2, 0], // 左侧顶点
                    ['L', width / 2, 0] // 右侧顶点
                )
            } else {
                path.unshift(
                    ['M', 0, height / 2],
                    ['L', -width / 2, 0], // 左侧顶点
                    ['L', width / 2, 0] // 右侧顶点
                )
            }

            return path
        },
        getAnchorPoints (cfg) {
            if (!cfg.direction || cfg.direction === 'up') {
                return cfg.anchorPoints || [
                    [0.5, 0],
                    [0, 1],
                    [1, 1],
                    [0.5, 1]
                ]
            } else {
                return cfg.anchorPoints || [
                    [0, 0],
                    [1, 0],
                    [0.5, 1]
                ]
            }
        }
    }, 'base-node')
}
